<script setup lang="ts">
import { computed, onMounted, watch, ref } from "vue";
import { addDialog, type DialogOptions } from "@/components/ReDialog";
import type { ContractData } from "@/types/contract.types";
import { resolveContractBySymbol, MDominantIcon } from "./useSymbolSelector";
import DialogBody from "./DialogBody.vue";
import { useBreakpointQuery } from "@/utils/device";
import { ElMessage } from "element-plus";

defineOptions({ name: "SymbolSelector" });
const props = defineProps<{
  disabled?: boolean;
  disableWarningText?: string;
}>();

const symbolModel = defineModel<string>("symbol", { default: "" });

const emit = defineEmits<{
  (e: "contract-change", contract: ContractData | null): void;
}>();

const resolvedContract = ref<ContractData | null>(null);

const { isSmUp, isMdUp } = useBreakpointQuery();

const displayText = computed(() => symbolModel.value || "");

async function resolveIfNeeded(sym: string | undefined) {
  if (sym) {
    const found = await resolveContractBySymbol(sym);
    resolvedContract.value = found ?? null;
    emit("contract-change", resolvedContract.value);
  }
}

onMounted(() => {
  void resolveIfNeeded(symbolModel.value);
});

watch(
  () => symbolModel.value,
  sym => {
    if (sym && resolvedContract.value?.symbol !== sym) {
      resolvedContract.value = null;
      void resolveIfNeeded(sym);
    }
  }
);

function openDialog() {
  if (props.disabled) {
    const msg = props.disableWarningText || "选择器已禁用";
    ElMessage.warning(msg);
    return;
  }

  const options: DialogOptions = {
    title: "选择合约",
    width: isMdUp() ? "60%" : isSmUp() ? "70%" : "90%",
    hideFooter: true,
    alignCenter: true,
    contentRenderer: () => DialogBody,
    props: {
      showDetails: true,
      symbol: symbolModel.value,
      onSelect: (c: ContractData) => {
        symbolModel.value = c.symbol;
        resolvedContract.value = c;
        emit("contract-change", c);
      }
    }
  };
  addDialog(options);
}
</script>

<template>
  <div
    class="symbol-3d inline-flex h-9 cursor-pointer items-center gap-1 rounded px-2 py-1 select-none hover:bg-gray-50"
    role="button"
    @click="openDialog"
  >
    <span
      v-if="displayText"
      class="symbol-3d__text overflow-visible p-1 font-mono text-xl font-bold text-nowrap text-gray-700"
    >
      {{ displayText }}
    </span>
    <span
      v-else
      class="symbol-3d__text text-md font-mono font-medium text-gray-400"
      >点击选择合约</span
    >
    <component
      :is="MDominantIcon"
      v-if="resolvedContract?.is_dominant"
      class="text-red-500"
    />
  </div>
</template>

<style scoped>
.symbol-3d {
  background-color: var(--el-bg-color);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 65%),
    inset 0 -1px 0 rgb(0 0 0 / 6%),
    0 1.5px 3px rgb(0 0 0 / 6%);
  transition:
    box-shadow 0.2s ease,
    transform 0.08s ease;
}

.symbol-3d:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    inset 0 -1px 0 rgb(0 0 0 / 8%),
    0 2px 4px rgb(0 0 0 / 8%);
}

.symbol-3d:active {
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 12%),
    0 1px 2px rgb(0 0 0 / 6%);
  transform: translateY(0.5px);
}

.symbol-3d__text {
  text-shadow:
    0 1px 0 rgb(255 255 255 / 60%),
    0.5px 0.5px 0 rgb(0 0 0 / 6%);
}
</style>
